<template>
  <div class="container">
    <div class="cainixihuan">
      <div class="titles">
        猜你喜欢
      </div>
      <div
        class="more"
        @click="more"
      >
        更多
      </div>
    </div>
    <el-carousel
      indicator-position="none"
      trigger="click"
      :height="dataHeight"
      arrow="never"
      @change="changeCarousel"
    >
      <el-carousel-item
        v-for="items in count"
        :key="items"
      >
        <div
          v-for="(item, index) in likeList"
          :key="item.pid"
          class="item-box"
          @click="goDetail(item)"
        >
          <div v-if="index >= items * 4 - 4 && index < items * 4">
            <div class="imgBox">
              <img
                :src="item.defaultAlbum"
                alt=""
              >
            </div>
            <div class="priceBox">
              <div class="tls">
                {{ item.pName }}
              </div>
              <div class="prs">
                ¥{{ item.fSalePrice }}
              </div>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
    <!-- :style="{'width':dotList}" -->
    <div
      ref="dotList"
      class="dotList"
    >
      <div
        v-for="(item, index) in count"
        :key="index"
        :style="{ width: 100 / count + '%' }"
        :class="{ active: activeIndex == index }"
      />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    dataHeight: {
      type: String,
      default: "25.07rem",
    },
    carouselData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      activeIndex: 0,
      itemLength: 4,
      dotLength: 4,
      likeList: [],
      count: 0,
    };
  },
  computed: {
    dotList: function () {
      return 87.5 / this.itemLength + "rem";
    },
  },
  created() {
    console.log('this.carouselData1', this.carouselData)
  },
  mounted () {
    // this.CarouselDataFun(this.carouselData)
  },
  methods: {
    getData(data) {
      let params = {
        queryCondition: {
          order: [
            {
              fieldname: "iOrder",
              direction: "asc",
            },
          ],
          pagesize: 20,
          pageindex: 1,
          where: [
            {
              fieldname: "goods_id_exclude",
              valuefrom: data.id,
            },
            {
              fieldname: "categoryid",
              valuefrom: data.productClass,
            },
            {
              fieldname: "type",
              valuefrom: 1,
            },
          ],
        },
      };
      this.$api.home.getRecommendCartList(params).then((res) => {
        if (res.code == 200) {
          // console.log(res.data);
          this.likeList = res.data.data;
          this.count = Math.ceil(res.data.data.length / 4);
        }
      });
    },
    //跑马灯跑动
    changeCarousel(index) {
      this.activeIndex = index;
    },
    more() {
      console.log('更多', JSON.parse(JSON.stringify(this.carouselData)))
      this.$router.push({
        path: "/morelist",
        query: {
          iShopId: this.carouselData.iShopId,
          goodsIdExclude: this.carouselData.id,
          productClass: this.carouselData.productClass,
          type: 1,
        },
      });
    },
    //跳转商品详情
    goDetail(item) {
      this.$emit("getNewDetail", item.pid, item.iShopId);
    },
  },
};
</script>
<style scoped lang="scss">
.container {
  padding: 0 16.19rem;
  display: flex;
  flex-direction: column;

  .cainixihuan {
    border-bottom: 0.25rem solid #000;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    margin-bottom: 1.19rem;

    .titles {
      font-size: 1.13rem;
    }

    .more {
      font-size: 0.88rem;
      cursor: pointer;
    }
  }
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  // line-height: 300px;
  margin: 0;
}

.el-carousel__button {
  width: 20.38rem !important;
}

.dotList {
  // width: 87.5rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: rgba(0, 0, 0, 0.1);
  height: 0.25rem;

  > div {
    // width: 20.38rem;
    height: 0.25rem;

    &.active {
      background: #000;
    }
  }
}

.el-carousel__item {
  display: flex;
  flex-direction: row;

  .item-box {
    margin-right: 2rem;
    cursor: pointer;
    &:nth-child(4n) {
      margin-right: 0;
    }

    .imgBox {
      width: 20.38rem;
      height: 20.38rem;
      object-fit: contain;
      background-color: rgba(0, 0, 0, 0.1);
      align-items: center;
      display: flex;
      justify-content: center;

      img {
        vertical-align: middle;
        width: 20rem;
        object-fit: contain;
      }
    }

    .priceBox {
      display: flex;
      flex-direction: column;
      height: auto;
      background-color: #fcfcfc;
      width: 20.38rem;
      padding: 1.13rem 0;

      .prs {
        color: #f0406f;
        font-size: 1.09rem;
      }

      .tls {
        color: #040000;
        font-size: 0.98rem;
        padding-bottom: 0.49rem;
		width: 100%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
      }
    }
  }
}
</style>
